<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <j-date placeholder="请选择创建日期" v-model="model.createTime" :show-time="true"
                      date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="工具名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolName">
              <a-input v-model="model.toolName" placeholder="请输入工具名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="物料码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolCode">
              <a-input v-model="model.toolCode" placeholder="请输入物料码"></a-input>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolNum">-->
<!--              <a-input v-model="model.toolNum" placeholder="请输入数量"></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolSpecifications">
              <a-input v-model="model.toolSpecifications" placeholder="请输入规格"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="工具类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolType">
              <j-dict-select-tag type="list" v-model="model.toolType" dictCode="tool_type" style="width: 430px"  placeholder="请选择工具类别"/>
<!--              <a-select showSearch placeholder="请选择类别" style="width: 430px">-->
<!--                <a-select-option v-for="item in templateDatas">-->
<!--                  {{item}}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
              <a-button type="primary" style="float: right" @click="addToolType">新增</a-button>
            </a-form-model-item>


            <a-modal v-model="newTool" title="新增工具" @ok="handleOk">
              <a-form-model :model="tool" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="工具名称">
                  <a-input v-model="tool.name" />
                </a-form-model-item>
              </a-form-model>
            </a-modal>

          </a-col>
          <a-col :span="24">
            <a-form-model-item label="其他" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="other">
              <a-input v-model="model.other" placeholder="请输入其他"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction, postAction,postToolTypeAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'ToolAdminForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      newTool: false,
      model: {
        toolName: '',
        toolCode: '',
        toolSpecifications: '',
        toolNum:'',
        // toolName: '',
        // toolNum: '',
        // toolSpecifications: '',
      },
      tool: {
        name: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      validatorRules: {
        createTime: [
          { required: true, message: '请输入创建时间!'},
        ],
        toolName: [
          { required: true, message: '请输入工具名称!'},
        ],
        toolCode: [
          { required: true, message: '请输入工具物料码!'},
        ],
        toolNum: [
          { required: true, message: '请输入工具数量!'},
        ],
        toolType: [
          { required: true, message: '请输入工具类别!'},
        ],
        toolSpecifications:[
          { required: true, message: '请输入工具规格!'},
        ]
      },
      templateDatas: [],
      url: {
        add: '/tooladmin/toolAdmin/add',
        edit: '/tooladmin/toolAdmin/edit',
        queryById: '/tooladmin/toolAdmin/queryById',
        toolTypeadd: '/tooladmin/toolAdmin/toolTypeadd'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  mounted() {

  },
  methods: {
    addToolType() {
      this.newTool = true
    },
    handleOk() {

      let url = this.url.toolTypeadd;
      postAction(url,this.tool).then(res =>{
        console.log("返回数据"+res)
        if (res === 1)
          this.$message.info("类别添加成功！")
        else
          this.$message.info("类别添加失败，数据重复！")
        console.log(res)
      }).catch(res => {
        this.$message.error("类别添加失败！")
      })
      this.newTool = false
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },

    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            console.log(res)
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }

      })
    }
  }
}
</script>